		<link rel="stylesheet" type="text/css" href="<?php echo url_for('gadget/css',true)?>" media="all" />
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="http://<?php echo $sf_request->getHost()?>/css/gadget-ie.css" media="all" />
		<![endif]-->	
		<script type="text/javascript" src="<?php echo url_for('gadget/js?container='.$container,true)?>"></script>
		<script type="text/javascript" src="http://api.seesmic.com/js/pkg/seesmic_standalone.js"></script>
		<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
		<div id="canvas">
			<div id="nametag">
				<div class="avatar"><img src="" /></div>
				<span></span>
			</div>
			<div id="dashboard">
				<ul id="navigation" class="hide">
					<li class="to-home">home</li>
					<li class="to-debates">debates</li>
					<li class="to-profile">my profile</li>
					<li class="to-opposites">my opposites</li>
					<li class="to-about">about LYPO</li>
				</ul>
			</div>

			<!-- PRE-REGISTRATION -->
			<div id="preregister-choice" class="page hide">
				<h1>Register</h1>
				<p>
					Are you completely new to LYPO or do you already have an account on a different social network?
				</p>
				<p class="group">
					<span class="new-user">I am new!</span>
					<span class="existing-user">I already have an account</span>
				</p>
			</div>

			<!-- PRE-REGISTRATION -->
			<div id="preregister-connect" class="page hide">
				<h1>Register</h1>
				<ul>
					<li>
						Please fill in the code here: <input type="text" class="connect-code" />
						<input type="submit" class="submit-code" value="Submit" /><span class="error"></span>
					</li>
					<li>
						Don't have a code? No problem, just do the following:
						<ol>
							<li>
								Go to the LYPO widget you already have installed in another social network.<br />
								Available networks: <?php include_partial('global/socialnetworkselector') ?>
								<span class="go-to-network">go there</span> 
							</li>
							<li>In the LYPO widget go to the 'My profile' section and choose 'networks'</li>
							<li>Generate a code</li>
							<li>Copy the code in the field at the top of this page and press "submit"</li>
						</ol>
					</li>
					<li>
						You haven't already installed this widget? Just go to the
						<span class="regular-registration">regular registration</span>
					</li>
				</ul>
			</div>

			<!-- REGISTER PAGE - STATEMENTS -->
			<div id="register-statements" class="page hide">
				<h1>Register</h1>
				<p>
					Find out who your opposites are and get your own profile by answering these questions:
				</p>

				<h1>Statements</h1>
				<div id="statement">
					<div id="currentstatement"></div>
				</div>
				<div id="statement-options">
					<span class="prev-step">Previous</span>
					<span class="agree">Agree</span>
					<span class="disagree">Disagree</span>
					<span class="next-step">Next</span>
				</div>

				<p>
					The statements/motions are made by the members of Couscousglobal in small movies put on
					<a href="http://www.couscousglobal.com/" target="_blank">www.couscousglobal.com</a> and
					<a href="http://www.youtube.com/couscousglobal" target="_blank">www.youtube.com/couscousglobal</a>.
					You can use this collection  to inspire or irritate you enough to start your own debate.
				</p>
			</div>

			<!-- REGISTER PAGE - PERSONAL INFO -->
			<div id="register-info" class="page hide">
				<h1>Personal info</h1>
				<p>
					Now the last step in order to make your profile. We just need your name, the rest of the profile LYPO will get from your profiles on this social network. You can pimp your profile later.
					Edit and enter your info as you like, press done to create your profile.			
				</p>
				<ol class="offset">
					<li>
						<label for="name">Name:</label><input type="text" name="name" id="name" />
					</li>
					<li>
						<label for="age">Age:</label>
						<select name="age" id="age">
						<option value="-1">Select an age</option>
						<?php for ($i=1; $i<101; $i++): ?>
						<option value="<?php echo $i ?>"><?php echo $i ?></option>
						<?php endfor; ?>
						</select>
					</li>

					<li>
						<label for="gender">Gender: </label>
						<select name="gender" id="gender">
							<optgroup label="Gender">
								<option value="m">Male</option>
								<option value="f">Female</option>
							</optgroup>
						</select>
					</li>
					<li>
						<label for="origin">Roots/origin: </label>
						<input type="text" name="origin" id="origin" />
					</li>
					<li>
						<label for="country">Country: </label>
						<?php use_helper('Form'); ?>
						<?php echo select_country_tag('country', ''); ?>
					</li>
					<li>
						<label for="occupation">Occupation: </label>
						<input type="text" name="occupation" id="occupation" />
					</li>
					<li>
						<label for="enemy">My favorite enemy: </label>
						<input type="text" name="enemy" id="enemy" />
					</li>
					<li>
						<label for="thumbnail_url">
							Avatar:<br />
							<span>Enter the URL of the picture you want to use. It will be cropped to 75x75 pixels</span>
						</label>
						<input type="text" name="thumbnail_url" id="thumbnail_url" style="vertical-align: top" />
						<img src="" id="avatar" alt="Your avatar" />					
					</li>
				</ol>
				<p>
					<span class="open-keywords">Pimp your profile</span> (by adding extra information)
				</p>
				<div id="keywords" class="hide">
					<h1>More info</h1>
					<div id="keyword-presets">
						<div class="group">
							<h3>Categories</h3>
							<p>
								<span class="keyword-category" style="font-weight: bold">Character</span>, <span class="keyword-category">Politics</span>,
								<span class="keyword-category">Religion</span>, <span class="keyword-category">Sex</span>,
								<span class="keyword-category">Wound</span>, <span class="keyword-category">Favourite issue</span>,
								<span class="keyword-category">Ambition</span>, <span class="keyword-category">My background</span>,
								<span class="keyword-category">Relationship</span> 
							</p>
						</div>

						<div class="group">
							<h3>keywords</h3>
							<p class="category-character category">
								<span class="keyword">Addicted</span>, <span class="keyword">Ashamed</span>,
								<span class="keyword">Blunt</span>, <span class="keyword">Emotional</span>,
								<span class="keyword">Fatalistic</span>, <span class="keyword">Helpful</span>,
								<span class="keyword">Horny</span>, <span class="keyword">Loveable</span>,
								<span class="keyword">Modern</span>, <span class="keyword">Passionate</span>,
								<span class="keyword">Pessimist</span>, <span class="keyword">Provocative</span>,
								<span class="keyword">Rational</span>, <span class="keyword">Rebelious</span>,
								<span class="keyword">Sensitive</span>, <span class="keyword">Sinful</span>,
								<span class="keyword">Spiritual</span>, <span class="keyword">Traditional</span>
							</p>
							<p class="category-politics category hide">
								<span class="keyword">Capitalistic</span>, <span class="keyword">Communist</span>,
								<span class="keyword">Conservative</span>, <span class="keyword">Democratic</span>,
								<span class="keyword">Extremist</span>, <span class="keyword">Fascist</span>,
								<span class="keyword">Feminist</span>, <span class="keyword">Green</span>,
								<span class="keyword">Liberal</span>, <span class="keyword">Social</span>
							</p>
							<p class="category-religion category hide">
								<span class="keyword">Atheistic</span>, <span class="keyword">Buddhist</span>,
								<span class="keyword">Christian</span>, <span class="keyword">Confusions</span>,
								<span class="keyword">Hindu</span>, <span class="keyword">Jewish</span>,
								<span class="keyword">Muslim</span>, <span class="keyword">Orthodox</span>
							</p>
							<p class="category-sex category hide">
								<span class="keyword">Bi</span>, <span class="keyword">Celebacy</span>,
								<span class="keyword">Don't like it</span>, <span class="keyword">Gay</span>,
								<span class="keyword">Hetero</span>, <span class="keyword">Lesbian</span>,
								<span class="keyword">Like it</span>, <span class="keyword">Transsexual</span>,
								<span class="keyword">Virgin</span>
							</p>
							<p class="category-wound category hide">
								<span class="keyword">Abuse</span>, <span class="keyword">Addiction</span>,
								<span class="keyword">Body</span>, <span class="keyword">Censorship</span>,
								<span class="keyword">Confession</span>, <span class="keyword">Death</span>,
								<span class="keyword">Divorce</span>, <span class="keyword">Drugs</span>,
								<span class="keyword">Fear</span>, <span class="keyword">Feeling</span>,
								<span class="keyword">lost</span>, <span class="keyword">Fight</span>,
								<span class="keyword">Friends</span>, <span class="keyword">Handicap</span>,
								<span class="keyword">Hate</span>, <span class="keyword">History</span>,
								<span class="keyword">Insults</span>, <span class="keyword">Lies</span>,
								<span class="keyword">Loss</span>, <span class="keyword">Pain</span>,
								<span class="keyword">Rape</span>, <span class="keyword">Scars</span>,
								<span class="keyword">Skin</span>, <span class="keyword">Terrorism</span>,
								<span class="keyword">Treason</span>, <span class="keyword">Truth</span>,
								<span class="keyword">Violence</span>, <span class="keyword">War</span>
							</p>
							<p class="category-favourite-issue category hide">
								<span class="keyword">Animal rights</span>, <span class="keyword">Art</span>,
								<span class="keyword">Art and culture</span>, <span class="keyword">Authorities</span>,
								<span class="keyword">Battle</span>, <span class="keyword">Books</span>,
								<span class="keyword">Brands</span>, <span class="keyword">Cartoons</span>,
								<span class="keyword">Censorship</span>, <span class="keyword">Dictatorship</span>,
								<span class="keyword">Dresscodes</span>, <span class="keyword">Drugs</span>,
								<span class="keyword">Education</span>, <span class="keyword">Education and developement</span>,
								<span class="keyword">Enemy</span>, <span class="keyword">Environment</span>,
								<span class="keyword">European Union</span>, <span class="keyword">Family/marriage/honour</span>,
								<span class="keyword">Fashion</span>, <span class="keyword">Food</span>,
								<span class="keyword">Freedom of speech</span>, <span class="keyword">Gay movement</span>,
								<span class="keyword">Globalisation</span>, <span class="keyword">Health</span>,
								<span class="keyword">History</span>, <span class="keyword">Immigration/integration</span>,
								<span class="keyword">International development</span>, <span class="keyword">Israel/Palestine</span>,
								<span class="keyword">Law</span>, <span class="keyword">Leaders in Africa</span>,
								<span class="keyword">Leadership</span>, <span class="keyword">Love</span>,
								<span class="keyword">Marriage</span>, <span class="keyword">Media</span>,
								<span class="keyword">Middle East</span>, <span class="keyword">Migration</span>,
								<span class="keyword">Movies</span>, <span class="keyword">Music</span>,
								<span class="keyword">Politics</span>, <span class="keyword">Religion</span>,
								<span class="keyword">Roots</span>, <span class="keyword">School</span>,
								<span class="keyword">Science/technology</span>, <span class="keyword">Sex</span>,
								<span class="keyword">Sport</span>, <span class="keyword">Terrorism</span>,
								<span class="keyword">The Media</span>, <span class="keyword">The West</span>,
								<span class="keyword">Travel</span>, <span class="keyword">War</span>,
								<span class="keyword">Words</span>
							</p>
							<p class="category-ambition category hide">
								<span class="keyword">Career Opportunity</span>, <span class="keyword">Destroy the world</span>,
								<span class="keyword">Familylife</span>, <span class="keyword">Freedom</span>,
								<span class="keyword">Freedom of speech</span>, <span class="keyword">Friendship</span>,
								<span class="keyword">Future</span>, <span class="keyword">Get famous</span>,
								<span class="keyword">Get rich</span>, <span class="keyword">Intimacy</span>,
								<span class="keyword">Leadership</span>, <span class="keyword">Love</span>,
								<span class="keyword">Migration</span>, <span class="keyword">Money</span>,
								<span class="keyword">My dream</span>, <span class="keyword">Passion</span>,
								<span class="keyword">Peace</span>, <span class="keyword">Power</span>,
								<span class="keyword">Pregnant</span>, <span class="keyword">Rights</span>,
								<span class="keyword">Save the world</span>, <span class="keyword">Worldpeace</span>
							</p>
							<p class="category-my-background category hide">
								<span class="keyword">Addiction</span>, <span class="keyword">Alone</span>,
								<span class="keyword">Angry</span>, <span class="keyword">Arab</span>,
								<span class="keyword">Arabic</span>, <span class="keyword">Beauty</span>,
								<span class="keyword">Body</span>, <span class="keyword">Chinese</span>,
								<span class="keyword">Colour</span>, <span class="keyword">Coloured</span>,
								<span class="keyword">Confession</span>, <span class="keyword">Extreme</span>,
								<span class="keyword">Family</span>, <span class="keyword">Fashion</span>,
								<span class="keyword">Guilt</span>, <span class="keyword">Hair</span>,
								<span class="keyword">Honour</span>, <span class="keyword">Humor</span>,
								<span class="keyword">Humour</span>, <span class="keyword">Identity</span>,
								<span class="keyword">Illegal</span>, <span class="keyword">Intimate</span>,
								<span class="keyword">Man</span>, <span class="keyword">Me</span>,
								<span class="keyword">Mixed</span>, <span class="keyword">My culture</span>,
								<span class="keyword">Opposition</span>, <span class="keyword">Pregnant</span>,
								<span class="keyword">Rebel</span>, <span class="keyword">Secret</span>,
								<span class="keyword">Sin</span>, <span class="keyword">Street</span>,
								<span class="keyword">Woman</span>
							</p>
							<p class="category-relationship category hide">
								<span class="keyword">Divorced</span>,
								<span class="keyword">Engaged</span>,
								<span class="keyword">In love </span>,
								<span class="keyword">Mariag</span>,
								<span class="keyword">Single</span>
							</p>
						</div>
						<p>
							<span class="close-keywords">Close X</span>
						</p>
					</div>
					<p>
						<label for="add-own">Add your own</label>
						<input type="text" name="add-own" id="add-own" />
						<input type="button" class="add-keyword" value="Add" />
					</p>
					<h1>Chosen keywords (click to remove)</h1>
					<div id="chosen-keywords">
						No keywords chosen
					</div>
				</div>
				<p>
					<button class="done">Done</button>
				</p>
			</div>

			<!-- PERSONAL HOMEPAGE -->
			<div id="home" class="page hide">
				<div id="home-debates">
					<div class="tabbed">
						<ul class="tabs">
							<li id="tab-debate-today" class="tab active">Debate of the day</li>
							<li id="tab-recent-debates" class="tab">Recent debates</li>
							<li id="tab-respected-debates" class="tab">Respected debates</li>
						</ul>
						<div id="debate-today" class="content"></div>
						<div id="recent-debates" class="content hide"></div>
						<div id="respected-debates" class="content hide"></div>
					</div>
				</div>
				
				<div id="home-opposites"></div>
			</div>

			<!-- MY PROFILE PAGE -->
			<div id="myprofile" class="page hide">
				<h1>My profile</h1>
				<div id="my-info"></div>
				<div id="my-statements-debates"></div>
				<div id="my-people"></div>
			</div>

			<!-- A PROFILE PAGE -->
			<div id="profile" class="page hide">
				<h1>Viewing profile</h1>
				<div id="profile-info"></div>
				<div id="statements-debates"></div>
				<div id="profile-opposites"></div>
			</div>

			<!-- SINGLE DEBATE PAGE -->
			<div id="debate" class="page hide">
				<h1>Debate</h1>
				<div id="debate-statement" class="group"></div>
				<div id="debate-react" class="group">
					<div id="compose-reaction">
						<div class="avatar"><img src="" /></div>
						<div class="commenter-name"></div>
						<div class="commenter-reaction group">
							Enter your comment:<br />
							<textarea name="comment" id="comment"></textarea>
							<label for="no-video" class="no-video">
								<input type="radio" id="no-video" name="videotype" class="no-video-input" />
								No video
							</label>
							<label for="embed-video" class="embed-video">
								<input type="radio" id="embed-video" name="videotype" class="embed-video-input" />
								Embed a video
							</label>
							<label for="create-video" class="create-video">
								<input type="radio" id="create-video" name="videotype" class="create-video-input" />
								Create a video
							</label> 
							<div class="video hide">
								Embedcode of your video (YouTube, Vimeo or Daily Motion):<br/>
								<textarea name="embedcode" id="embedcode"></textarea><br />
								<p>or</p>
								URL of your video (YouTube, Vimeo or Daily Motion):<br />
								<input type="text" name="videolink" id="videolink" />
							</div>
							<div class="recorder hide"></div>
							<input type="hidden" name="seesmic_url" id="seesmic_url" />

							<span class="send-reaction">Send</span>
						</div>
					</div>
					<span class="all-reactions">All comments</span>
					<span class="perfect-opposite-reactions">Comments from your perfect opposites</span>
				</div>
				<div id="debate-reactions"></div>
			</div>

			<!-- DEBATES OVERVIEW PAGE -->
			<div id="debates" class="page hide">
				<h1>Debates</h1>
				<div id="debates-list"></div>
			</div>

			<div id="my-opposites" class="page hide">
				<div id="my-perfect-opposites"></div>
				<div id="opposites-respects"></div>
			</div>

			<!-- ABOUT PAGE -->
			<div id="about" class="page hide">
				<h1>About LYPO</h1>
				<p>
					Love Your Perfect Opposite, is created because we believe you learn the most about yourself by talking to people who are different than you/who disagree with you.<br />
					It is the technological translation of the famous sentence:<br />
					"I disagree with what you say, but I will defend to death your right of saying that."<br />
					We are bored with just finding Friends on social networks, we want to find our Opposites and have a conversation/debate. 
				</p>
			</div>

			<div id="loading" class="page hide"></div>
		</div>